<template>
	<view class="u-flex-col" style="height: 100vh;">
		<view class="u-white-bg">
			<u-tabs-swiper :list="tablist" :current="current" :is-scroll="false" @change="tabsChange"></u-tabs-swiper>
		</view>
		<view class="check-swiper-box u-flex-1">
			<swiper class="check-swiper" :current="current" circular @change="swiperChange">
				<swiper-item>
					<view class="u-flex u-p-30 u-border-bottom u-white-bg" v-for="(item, i) in filedList.fields"
						:key="i" v-if="getRead(item.__vModel__)" v-show="!item.__config__.noShow">
						<view class="check-label">
							{{item.__config__.label}}
						</view>
						<view class="check-value">
							{{formData[item.__vModel__]}}
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="u-white-bg u-p-30">
						<u-steps :list="steplist" direction="column" :current="stepCurrent"></u-steps>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="u-white-bg u-p-30">
						<u-time-line>
							<u-time-line-item v-for="(item, index) in record" :key="index">
								<template v-slot:content>
									<view v-if="item.handleStatus === 2">
										<view>
											发起人员：{{item.userName}}
										</view>
										<view class="u-type-info">
											发起时间：{{$u.timeFormat(item.handleTime, 'yyyy-mm-dd')}}
										</view>
									</view>
									<view v-else-if="item.handleStatus === 3">
										<view>
											撤回人员：{{item.userName}}
										</view>
										<view class="u-type-info">
											<view>
												撤回时间：{{$u.timeFormat(item.handleTime, 'yyyy-mm-dd')}}
											</view>
											<view>
												撤回节点：{{item.nodeName}}
											</view>
											<view class="u-flex">
												<view>撤回原因：</view>
												<view>{{item.handleOpinion||''}}</view>
											</view>
										</view>
									</view>
									<view v-else-if="item.handleStatus === 4">
										<view>
											终止人员：{{item.userName}}
										</view>
										<view class="u-type-info">
											<view>
												终止时间：{{$u.timeFormat(item.handleTime, 'yyyy-mm-dd')}}
											</view>
											<view class="u-flex">
												<view>终止原因：</view>
												<view>{{item.handleOpinion||''}}</view>
											</view>
										</view>
									</view>
									<view v-else>
										<view>
											审核人员：{{item.userName}}
										</view>
										<view class="u-type-info">
											<view>
												审核时间：{{$u.timeFormat(item.handleTime, 'yyyy-mm-dd')}}
											</view>
											<view>
												审核节点：{{item.nodeName}}
											</view>
											<view>
												审核状态：<text
													:class="item.handleStatus === 1?'u-type-primary':'u-type-error'">{{item.handleStatus === 1?'同意':'拒绝'}}</text>
											</view>
											<view class="u-flex">
												<view>审核意见：</view>
												<view>{{item.handleOpinion||''}}</view>
											</view>
										</view>
									</view>
								</template>
							</u-time-line-item>
						</u-time-line>
					</view>
				</swiper-item>
			</swiper>
			<view class="check-foot u-flex">
				<template v-if="checkType == 1">
					<view class="u-flex-1 check-btn check-revoke-btn" @click="showPop(1)">
						撤回
					</view>
					<view class="u-flex-1 check-btn check-pass-btn" @click="$u.debounce(showModal, 600)">
						催办
					</view>
				</template>
				<template v-else-if="checkType == 2">
					<view class="u-flex-1 check-btn check-refuse-btn" @click="showPop(2)">
						拒绝
					</view>
					<view class="u-flex-1 check-btn check-pass-btn" @click="showPop(3)">
						通过
					</view>
					<view class="u-flex-1 check-btn check-turn-btn" @click="$u.debounce(transfer, 600)">
						转办
					</view>
				</template>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" height="500" :safe-area-inset-bottom="true">
			<view class="u-p-30">
				<u-input type="textarea" v-model="handleOpinion" :placeholder="placeholder" height="340" focus
					:auto-height="false"></u-input>
				<u-button type="primary" @click="$u.debounce(submit, 600)">确认{{btnText[submitType]}}</u-button>
			</view>
		</u-popup>
		<u-modal v-model="showM" :content="content" :title="mTitle" show-cancel-button @confirm="process"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
						name: '表单信息'
					},
					{
						name: '流程信息'
					},
					{
						name: '流转记录'
					}
				],
				current: 0,
				flowId: '',
				formId: '',
				formOperates: [],
				filedList: {
					fields: []
				},
				freeApprover: 0,
				formData: {},
				subFormData: {
					flowId:'',
					id: '',
					data: ''
				},
				enCode: '',
				steplist: [],
				stepCurrent: -1,
				record: [],
				checkType: 0,
				show: false,
				placeholder: '',
				submitType: 0,
				handleOpinion: '',
				showM: false,
				content: '',
				btnText: ['', '撤回', '拒绝', '通过', '转办'],
				fid: '',
				mTitle: ''
			}
		},
		methods: {
			tabsChange(index) {
				this.current = index
			},
			swiperChange(e) {
				this.current = e.detail.current
			},
			getRead(id) {
				const _res = this.formOperates.find(item => {
					return item.id === id
				})

				return _res.read
			},
			showPop(pType) {
				const _arr = ['', '请填写撤回原因', '请填写审批意见', '请填写审批意见', '请填写转办原因']
				this.show = true
				this.submitType = pType
				this.placeholder = _arr[pType]
			},
			showModal() {
				this.showM = true
				this.mTitle = '催办'
				this.content = '此操作将提醒该节点尽快处理。'
			},
			submit() {
				if (this.handleOpinion !== '') {
					if (this.submitType === 1) {
						this.$u.api.putWithdraw(this.formId, {
							handleOpinion: this.handleOpinion
						}).then(res => {
							this.$u.toast(res.msg)
							this.$u.route('pages/work/flowchart/started')
						}).catch(err => {
							console.error(err)
						})
					} else if (this.submitType === 2) {
						// 驳回
						this.$u.api.postReject(this.fid, {
							handleOpinion: this.handleOpinion,
							formData: this.subFormData,
							enCode: this.enCode
						}).then(res => {
							this.$u.toast(res.msg)
							this.$u.route('pages/work/flowchart/processed')
						}).catch(err => {
							console.error(err)
						})
					} else if (this.submitType === 3) {
						// 通过
						this.$u.api.postAudit(this.fid, {
							handleOpinion: this.handleOpinion,
							formData: this.subFormData,
							enCode: this.enCode
						}).then(res => {
							this.$u.toast(res.msg)
							this.$u.route('pages/work/flowchart/processed')
						}).catch(err => {
							console.error(err)
						})
					}
				} else {
					this.$u.toast('请输入')
				}
			},
			process() {
				this.$u.api.postPrees(this.formId).then(res => {
					this.$u.toast(res.msg)
				}).catch(err => {
					console.error(err)
				})
			},
			transfer() {
				this.$u.route('pages/public/au-select-user', {id: this.$store.state.vuex_user.userInfo.organizeId})
				uni.$once('selected-user', (data) => {
					this.$u.api.postTransfer(this.fid, {freeApproverUserId: data.value}).then(res => {
						this.$u.toast(res.msg)
						this.$u.route('pages/work/flowchart/processed')
					}).catch(err => {
						console.error(err)
					})
				})
			}
		},
		onLoad(options) {
			if (options.id) {
				this.fid = options.fid
				this.flowId = options.id
				this.checkType = options.type
				uni.setNavigationBarTitle({
					title: options.title
				})
				this.$u.api.getFlowEngine(options.id).then(res => {
					// 字段权限
					this.formOperates = JSON.parse(res.flowTemplateJson).childNode.properties.formOperates
					// 表单信息
					this.filedList = JSON.parse(res.formData)

					for (let item of this.filedList.fields) {
						this.$set(this.formData, item.__vModel__, '')
					}
					if (options.formId) {
						this.$u.api.getFlowTask(options.formId).then(res => {
							this.formId = res.id
							this.subFormData.data = res.data
							const _formData = JSON.parse(res.data)
							for (const item of this.filedList.fields) {
								switch (item.__config__.jnpfKey) {
									case 'select':
										const _tmp = item.__slot__.options.find(opt => {
											return opt[item.__config__.props.value] = _formData[
												item.__vModel__]
										})
										this.formData[item.__vModel__] = _tmp[item.__config__.props.label]
										break;
									case 'date':
										this.formData[item.__vModel__] = this.$u.timeFormat(_formData[item
											.__vModel__], 'yyyy-mm-dd')
										break;
									case 'userSelect':
										this.$u.api.getContactsInfo({
											id: _formData[item.__vModel__]
										}).then(res => {
											this.formData[item.__vModel__] = res.realName
										}).catch(err => {
											console.error(err)
										})
										break;
									default:
										this.formData[item.__vModel__] = _formData[item.__vModel__]
										break;
								}
							}
						}).catch(err => {
							console.error(err)
						})
						this.$u.api.getFlowBefore(options.formId, options.stepId).then(res => {
							// console.log(res.flowTaskNodeList)
							this.subFormData.flowId = res.flowTaskInfo.flowId
							this.subFormData.id = res.flowTaskInfo.id
							this.enCode = res.flowTaskInfo.flowCode
							for (const item of res.flowTaskNodeList) {
								if (item.type !== -1) {
									this.steplist.push({
										name: item.nodeName
									})
								}
								if (item.completion == 1) {
									this.stepCurrent++
								}
							}
							this.record = res.flowTaskOperatorRecordList
						}).catch(err => {
							console.error(err)
						})
					}
				}).catch(err => {
					console.error(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.check-swiper {
		height: calc(100% - 100rpx);
	}

	.check-label {
		width: 200rpx;
	}

	.check-value {
		color: #999999;
	}

	.check-foot {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100rpx;

		.check-btn {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}

		.check-refuse-btn {
			background-color: #FFFFFF;
		}

		.check-pass-btn {
			color: #FFFFFF;
			background-color: #0071C5;
		}

		.check-turn-btn {
			color: #FFFFFF;
			background-color: #FFB85A;
		}

		.check-revoke-btn {
			color: #FFFFFF;
			background-color: #fa3534;
		}
	}
</style>
